<template>
  <div>
    <!-- 订单收入金额统计表（折线图） -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div id="line" style="width: 100%; height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 健康套餐柱状图和折线图 -->
    <el-row :gutter="10" style="margin: 10px 0">
      <el-col :span="24">
        <el-card>
          <div id="healthChart" style="width: 100%; height: 400px"></div> <!-- 健康套餐：数量(折线) + 金额(柱状) -->
        </el-card>
      </el-col>
    </el-row>

    <!-- 普通商品柱状图和折线图 -->
    <el-row :gutter="10" style="margin: 10px 0">
      <el-col :span="24">
        <el-card>
          <div id="normalChart" style="width: 100%; height: 400px"></div> <!-- 普通商品：数量(折线) + 金额(柱状) -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "@/util/axios";

export default {
  name: "Charts",
  data() {
    return {
      healthBarData: [],  // 存储健康套餐柱状图数据
      normalBarData: []   // 存储普通商品柱状图数据
    };
  },
  mounted() {
    // 获取 DOM 元素
    let lineDom = document.getElementById('line');
    let lineChart = echarts.init(lineDom);

    let healthChartDom = document.getElementById('healthChart');
    let healthChart = echarts.init(healthChartDom);

    let normalChartDom = document.getElementById('normalChart');
    let normalChart = echarts.init(normalChartDom);

    // 请求后端数据
    axios.get('admin/charts/line')
        .then((res) => {
          const data = res.data.data || {};

          // 更新健康套餐和普通商品柱状图数据
          this.healthBarData = data.healthBar || [];
          this.normalBarData = data.normalBar || [];

          // 订单收入金额统计表（折线图）
          const lineOption = {
            title: {
              text: '订单收入金额统计表',
              left: 'center'
            },
            legend: {
              // orient: 'vertical',
              left: 'left'
            },
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: 'category',
              data: data.line ? data.line.map(v => v.date) : []
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '总金额',
              type: 'line',
              data: data.line ? data.line.map(v => v.value) : [],
              smooth: true
            }]
          };

          // 健康套餐图表（柱状图：金额，折线图：数量）
          const healthOption = {
            title: {
              text: '健康套餐商品统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总数量', '总金额'],
              left: 'left', // 图例居中
              top: 'top', // 图例位置调整
              orient: 'horizontal' // 横向排列
            },
            xAxis: {
              type: 'category',
              data: this.healthBarData.map(item => item.GoodsNames),
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总数量',
                type: 'line',
                data: this.healthBarData.map(item => item.value2),  // 显示数量
                smooth: true
              },
              {
                name: '总金额',
                type: 'bar',
                data: this.healthBarData.map(item => item.value1),  // 显示金额
              }
            ]
          };

          // 普通商品图表（柱状图：金额，折线图：数量）
          const normalOption = {
            title: {
              text: '普通商品统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['总数量', '总金额'],
              left: 'left', // 图例居中
              top: 'top', // 图例位置调整
              orient: 'horizontal' // 横向排列
            },
            xAxis: {
              type: 'category',
              data: this.normalBarData.map(item => item.GoodsNames),
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '总数量',
                type: 'line',
                data: this.normalBarData.map(item => item.value2),  // 显示数量
                smooth: true
              },
              {
                name: '总金额',
                type: 'bar',
                data: this.normalBarData.map(item => item.value1),  // 显示金额
              }
            ]
          };

          // 设置折线图和柱状图数据
          lineChart.setOption(lineOption);
          healthChart.setOption(healthOption);
          normalChart.setOption(normalOption);
        })
        .catch(error => {
          console.error('请求数据失败:', error);
        });
  }
};
</script>

<style scoped>
</style>
